import "./index.less"
import React, { FC, useState, useEffect, useMemo } from "react";
import {
  NavBar,
  Button,
  Form,
  Input,
  Cascader,
  TextArea,
  ImageUploader,
  Toast,
} from "antd-mobile";
import { useNavigate, useLocation } from "react-router-dom";
import { residentCouncilHall } from "../service";


function ProceedingsDetails(props: any) {
  const navigate = useNavigate();
  const location = useLocation();
  const [articleType, setArticleType] = useState("")//文章类型
  const [articleId, setArticleId] = useState("")//文章id
  const [articleContent, setArticleContent] = useState("")
  const [contentData,setContentData]=useState<any>({})

  const goto = (state: any,id:any) => () => {
    if(state==0){
      navigate(`/intelligentGovernance/theTownHall/gotoJoin/?id=${id}`);
    }else{
      navigate(`/intelligentGovernance/theTownHall/publicityOfIdeas/?id=${id}`);
    }
  }

  useEffect(() => {
    const [type, detail] = location?.search?.substring(1).split("&&")
    setArticleId(detail.split("=")?.[1]);
    setArticleType(type.split("=")?.[1])
  }, [location])


  useEffect(() => {
    if (articleId) {
      residentCouncilHall({ villageCode: "511602006004",/* classType:selectType  */ })
      .then((res) => {
        if (res.code == 200) {
          const filterData=res.data?.filter((item:any)=>item?.id==articleId)
          const data=filterData?.[0]
          setContentData(data)
          setArticleContent(data?.topicContent)
        }
      })
      .catch((error) => {
        console.log(error);
      });
    }
  }, [articleId])


  useEffect(() => {
    document.getElementById('article-container').innerHTML = articleContent;
  }, [articleContent])
  
  return (
    <div className="eventDetails" >
      <div className="eventDetails-hearder">
        <div className="header-bg">
          <NavBar
            onBack={() => navigate(`/intelligentGovernance/theTownHall`)}
          >
            <div className="commontitle">议事详情</div>
          </NavBar>
        </div> 
      </div>
      <div className="eventDetails_contentBox">
        {contentData?  <div className="eventDetails-content" /* id="article-container" */>
          <img src="/images/mycommunity/bioqian.png" alt="" className="bioqian" />
          <div className="eventDetails-content-title">{contentData?.topic}</div>
          <div className="eventDetails-content-imfor">
            <img src={contentData?.img || "/images/mycommunity/noImage.jpg"} className="cover_img" />
            <div className="imfor-title">{contentData?.address} | {contentData?.topicType}</div>
            <div className="imfor-title">{contentData?.discussCreateTime}至{contentData?.discussEndTime}</div>
            <div className="imfor-title">已参与：<span className="numberBox">{contentData?.pointnum}</span>人</div>
          </div>
        </div>:null}
      
        <div className="eventDetails-article" id="article-container"></div>
        <div className="eventDetails-btn"
          onClick={goto(contentData?.state,articleId)}
        >{contentData?.state==0?"去参与":"观点公示"}</div>
      </div>

    </div>
  );
}

export default ProceedingsDetails;
